<template>
    <div class="preview-dialog">
        <!-- 预览视频 -->
        <BasicDialogVue
            :data="previewDialog"
            v-if="previewDialog.type == 'video'"
            @close="
                () => {
                    previewDialog.visible = false
                    previewDialog.src = ''
                }
            "
        >
            <template #content>
                <div class="video-container">
                    <video :src="previewDialog.src" autoplay controls></video>
                </div>
            </template>
        </BasicDialogVue>

        <el-image-viewer
            :url-list="[imageUrl]"
            v-if="previewDialog.visible && previewDialog.type == 'image'"
            @close="
                () => {
                    previewDialog.visible = false
                    previewDialog.src = ''
                }
            "
        ></el-image-viewer>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import BasicDialogVue from '@/components/baseDialog/Index.vue'
const imageUrl = ref('')
const previewDialog = reactive({
    visible: false,
    title: '视频预览',
    width: '800px',
    type: 'video',
    src: ''
})
</script>
